<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" class="input">
    <button class="button">button</button>
    <!-- 函数防抖 ：
            1：常见的用处在于  用户注册时候的手机号码验证和邮箱验证，只有等用户输入完毕后，前端才需要检查格式是否正确，
            2：当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间 -->
        <script>
            let debounce = function(fn,awaitTime){
                let timer;
                return () => {
                    clearTimeout(timer);
                    timer = setTimeout(()=>{
                        fn();
                    },awaitTime);
                }
            }
            // document.getElementsByClassName("input")[0].addEventListener('keydown',debounce(()=>{console.log(1)},1000));


            // ------------------------------------------------------
        // 函数节流：
        //     1:常见的用处在于上拉加载，下滑刷新
        //     2:每过N毫秒执行一次动作。期间不执行动作。
            let throttle = function(fn,delay){
                let timer = null;
                return () => {
                    if(timer){ return;}
                    timer = setTimeout(()=>{
                        fn();
                        //timer = null 并没有完全清除定时器，只有先清除定时器，之后将timer 变成0
                        clearTimeout(timer);
                        timer = null;
                    },delay);  
                }
            }
            document.getElementsByClassName("button")[0].addEventListener('click',throttle(()=>{console.log(1)},1000));
        </script>
</body>
</html>